<template>
	<div class="mine">
		<div class="member-center-main">
			<div class="member-center-menu">
				<div class="info-block">
					<div class="playerid">{{info.name}}</div>
				</div>
				<div class="balance-info">
					<div class="currency">{{$t('indexTitle.title23')}}</div>
					<div class="balance">{{info.money||0}}</div>
				</div>
				<div class="nav-block">
					<div class="item" :class="tab == 0 ? 'active':''" @click="goNextPage('/mine')">
						<img src="../../assets/icons/gerenziliao.png" alt="" />
						<div class="label">{{$t('indexTitle.title24')}}</div>
					</div>
					<div class="item" :class="tab == 1 ? 'active':''" @click="goNextPage('/vipRebates')">
						<img src="../../assets/icons/vip.png" alt="" />
						<div class="label">{{$t('indexTitle.title321')}}</div>
					</div>
					<div class="item" :class="tab == 2 ? 'active':''" @click="goNextPage('/deposit')">
						<img src="../../assets/icons/chongzhi.png" alt="" />
						<div class="label">{{$t('indexTitle.title26')}}</div>
					</div>
					<div class="item" :class="tab == 3 ? 'active':''" @click="goNextPage('/withdraw')">
						<img src="../../assets/icons/tixian.png" alt="" />
						<div class="label">{{$t('indexTitle.title27')}}</div>
					</div>
					<!-- <div class="item" :class="tab == 4 ? 'active':''" @click="goNextPage('/affiliate')">
						<img src="../../assets/icons/tuiguangfenxiao.png" alt="" />
						<div class="label">{{$t('indexTitle.title28')}}</div>
					</div> -->
					<div class="item" :class="tab == 5 ? 'active':''" @click="goNextPage('/mission')">
						<img src="../../assets/icons/renwurizhi.png" alt="" />
						<div class="label">{{$t('indexTitle.title29')}}</div>
					</div>
					<div class="item" :class="tab == 6 ? 'active':''" @click="goNextPage('/promotions')">
						<img src="../../assets/icons/youhuizhongxin.png" alt="" />
						<div class="label">{{$t('indexTitle.title30')}}</div>
					</div>
					<div class="item" :class="tab == 7 ? 'active':''" @click="goNextPage('/game-history')">
						<img src="../../assets/icons/youxijilu.png" alt="" />
						<div class="label">{{$t('indexTitle.title31')}}</div>
					</div>
					<div class="item" :class="tab == 8 ? 'active':''" @click="goNextPage('/finan-history')">
						<img src="../../assets/icons/caiwujilu.png" alt="" />
						<div class="label">{{$t('indexTitle.title32')}}</div>
					</div>
					<div class="item" :class="tab == 9 ? 'active':''" @click="goNextPage('/personalMsg')">
						<img src="../../assets/icons/gonggaozhongxin.png" alt="" />
						<div class="label">{{$t('indexTitle.title33')}}</div>
					</div>
				</div>
			</div>
			<div class="member-center-content">
				<div class="member-center-profile">
					<div class="title">{{$t('indexTitle.title24')}}</div>
					<div class="tab-content">
						<div class="nrc-tabs-nav">
							<span class="nrc-tabs-tab" :class="tabs == 0 ? 'active':''"
								@click="tabs= 0">{{$t('indexTitle.title123')}}</span>
							<span class="nrc-tabs-tab" :class="tabs == 1 ? 'active':''"
								@click="tabs = 1;bindbank = false">{{$t('indexTitle.title124')}}</span>
							<span class="nrc-tabs-tab" :class="tabs == 2 ? 'active':''"
								@click="selTabs(2)">{{$t('indexTitle.title125')}}</span>
						</div>
						<div class="nrc-tab-pane" v-if="tabs == 0" @click="goNextPage('/changeLoginPassword')">
							<div class="setting-btn">{{$t('indexTitle.title126')}}</div>
							<table>
								<tbody>
									<tr>
										<td class="label">{{$t('indexTitle.title127')}}</td>
										<td>
											<div class="value-wrap">
												<div>{{info.invite_code}}</div>
											</div>
										</td>
									</tr>
									<tr>
										<td class="label">{{$t('indexTitle.title128')}}</td>
										<td>
											<div class="value-wrap">
												<div>{{info.name}}</div>
											</div>
										</td>
									</tr>
									<tr>
										<td class="label">{{$t('indexTitle.title129')}}</td>
										<td>
											<div class="value-wrap">
												<div>{{info.real_name}}</div>
											</div>
										</td>
									</tr>
									<tr>
										<td class="label">{{$t('indexTitle.title241')}}</td>
										<td>
											<div class="value-wrap">
												<div>{{info.zhuanpan}}</div>
											</div>
										</td>
									</tr>
									<tr>
										<td class="label">{{$t('indexTitle.title130')}}</td>
										<td>
											<div class="value-wrap">
												<div>{{info.phone}}</div>
											</div>
										</td>
									</tr>
									<tr>
										<td class="label">{{$t('indexTitle.title131')}}</td>
										<td>
											<div class="value-wrap">
												<div>{{info.created_at}}</div>
											</div>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div v-if="tabs == 2">
							<div class="top-info">
								<div class="label">{{$t('indexTitle.title132')}}</div>
								<div class="main-wallet">
									<span class="value" v-if="allMoney">{{allMoney}}</span>
									<span class="value" v-if="!allMoney">{{info.money||0.00}}</span>
									<img @click="refresh()" :class="showloading ? 'loading':''"
										src="../../assets/images/shuaxinTow.png" alt="" />
								</div>
							</div>
							<div class="sub-wallets">
								<div class="data-box" v-for="(item,index) in walletlist" :key="index">
									<div class="name">{{item.name}}</div>
									<!-- <div class="balance">
										{{item.money}}
									</div> -->
									<div class="balance" v-if="item.money != '未开通'">
										<span v-if="item.moneyTow||item.moneyTow==0">{{item.moneyTow}}</span>
										<div v-if="!item.moneyTow&&item.moneyTow!=0" class="nrc-loading active "></div>
									</div>
									<div class="balance" v-else :class="item.money == '未开通' ? 'is-um':''">
										{{item.money}}
									</div>
								</div>
							</div>
						</div>
						<div v-if="tabs == 1">
							<div class="proList" v-if="!bindbank">
								<div v-if="info.bank_name == '' || info.bank_name == null" class="addBankBox"
									@click="addbank()">
									<div class="addBankBoxIt">
										{{$t('indexTitle.title133')}} +
									</div>
								</div>
								<div class="proListIt" v-else>
									<div class="proListItTop">
										{{$t('indexTitle.title134')}}
									</div>
									<div class="proListItBottOW">
										<div class="BriBox">
											<div class="proListItBot">
												{{info.bank_card}}
											</div>
											<div class="BriBoxright">
												<img src="../../assets/images/xiugai.png" alt="">
											</div>
										</div>
									</div>
								</div>
							</div>
							<div v-if="bindbank">
								<div class="proList">
									<div class="">
										<div class="magBox"
											:class="{focusBox:isShowOne,error:isShowOness,errorww:isShowThreessTow}">
											<div class="input-block" @click="getMsg('0')"><label for="password"
													:class="{inputblocklabel:isShowOne}">{{$t('indexTitle.title135')}}</label>
												<input type="text" :class="{inputblockinput:isShowOne}" v-model="name"
													@blur="blurinput('0')" @input='inputjianting(0)'>
											</div>
										</div>
										<div class="zhuyiBoxTow" v-if="isShowOness&&!isShowThreessTow">
											<img src="../../assets/images/zhuyitow.png" alt="">
											{{messageTextOne}}
										</div>
										<div class="zhuyiBox" v-if="!isShowOness&&!isShowThreessTow">
											<img src="../../assets/images/zhuyi.png" alt="">
											{{$t('indexTitle.title136')}}
										</div>
										<div class="zhuyiBox" v-if="isShowThreessTow">
											<img src="../../assets/images/zhuyi.png" alt="">
											{{messageText}}
										</div>
									</div>
									<div class="">
										<div class="mc-form-item">
											<div class="mc-input-field-label">{{$t('indexTitle.title137')}}</div>
											<el-select class="mc-input-base1" v-model="selectbank"
												:placeholder="$t('indexTitle.title84')">
												<el-option v-for="(item,index) in bank" :key="index" :value="item">
												</el-option>
											</el-select>
										</div>
										<div class="zhuyiBoxTow" v-if="isShowThreessThree">
											<img src="../../assets/images/zhuyitow.png" alt="">
											{{messageTextTow}}
										</div>
									</div>
									<div class="">
										<div class="magBox "
											:class="{focusBox:isShowTow,error:isShowTowss,errorww:isShowThreessTow}">
											<div class="input-block" @click="getMsg('1')"><label for="password"
													:class="{inputblocklabel:isShowTow}">{{$t('indexTitle.title138')}}</label>
												<input type="text" :class="{inputblockinput:isShowTow}"
													v-model="bankcard" @blur="blurinput('1')" @input='inputjianting(1)'>
											</div>
										</div>
										<div class="zhuyiBoxTow" v-if="isShowTowss&&!isShowThreessTow">
											<img src="../../assets/images/zhuyitow.png" alt="">
											{{messageTextThree}}
										</div>
										<div class="zhuyiBox" v-if="!isShowTowss&&!isShowThreessTow">
											<img src="../../assets/images/zhuyi.png" alt="">
											{{$t('indexTitle.title139')}}
										</div>
										<div class="zhuyiBox" v-if="isShowThreessTow">
											<img src="../../assets/images/zhuyi.png" alt="">
											{{messageText}}
										</div>
									</div>
									<div class="">
										<div class="magBox"
											:class="{focusBox:isShowThree,error:isShowThreess,errorww:isShowThreessTow}">
											<div class="input-block" @click="getMsg('2')"><label for="password"
													:class="{inputblocklabel:isShowThree}">{{$t('indexTitle.title140')}}</label>
												<input type="text" :class="{inputblockinput:isShowThree}"
													v-model="wangdian" @blur="blurinput('2')" @input='inputjianting(2)'>
											</div>
										</div>
										<div class="zhuyiBoxTow" v-if="isShowThreess&&!isShowThreessTow">
											<img src="../../assets/images/zhuyitow.png" alt="">
											{{messageTextFour}}
										</div>
										<div class="zhuyiBox" v-if="!isShowThreess&&!isShowThreessTow">
											<img src="../../assets/images/zhuyi.png" alt="">
											{{$t('indexTitle.title141')}}
										</div>
										<div class="zhuyiBox" v-if="isShowThreessTow">
											<img src="../../assets/images/zhuyi.png" alt="">
											{{messageText}}
										</div>
									</div>
									<div class="btnssss" @click="submit()">{{$t('indexTitle.title142')}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="member-center-profile">
					<div class="promo-ads-title">
						<div class="title">{{$t('indexTitle.title74')}}</div>
						<el-button>{{$t('indexTitle.title14')}}</el-button>
					</div>
					<div class="nodata">
						<div class="no-data">
							<img src="../../assets/images/nodata.svg" alt="" />
							<div>{{$t('indexTitle.title75')}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<loadingFour :msgText="msgTextTow" :isShowCloseBot="isShowCloseBot" v-if="isShowLoadingTeow"
			@closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>

<script>
	import {
		userinfo,
		mywallets,
		newbindbank,
		banklist,
		check
	} from "../../utils/api.js"
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		props: {},
		data() {
			return {
				close: true,
				info: [],
				tab: 0,
				tabs: 0,

				walletlist: [],
				showloading: false,

				bindbank: false,
				isShowOne: false,
				isShowTow: false,
				isShowThree: false,
				isShowOness: false,
				isShowTowss: false,
				isShowThreess: false,
				isShowOneeye: false,
				isShowToweye: false,
				isShowThreeeye: false,
				name: '',
				bankcard: '',
				wangdian: '',
				bank: [],
				selectbank: '',

				isShowThreessTow: false,
				isShowThreessThree: false,
				messageText: "",
				messageTextOne: this.$t('indexTitle.title58'),
				messageTextTow: this.$t('indexTitle.title58'),
				messageTextThree: this.$t('indexTitle.title58'),
				messageTextFour: this.$t('indexTitle.title58'),
				allMoney: 0.00,
				msgTextTow: "",
				isShowLoadingTeow: false,
				isShowCloseBot: false,
			}
		},
		components: {
			loadingFour
		},
		created() {},
		mounted() {
			if (this.$route.query.indexNum) {
				this.tabs = this.$route.query.indexNum;
			}
			this.info = JSON.parse(localStorage.getItem('userInfo'))
			// this.getuserinfo()
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			refresh() {
				let that = this;
				this.showloading = true;
				setTimeout(function() {
					that.showloading = false
				}, 3000)
				this.allMoney = 0.00;
				this.walletlist = [];
				// this.getuserinfo()
				this.getmywallet()
			},
			selTabs() {
				this.tabs = 2;
				this.getmywallet()
			},
			getuserinfo() {
				this.info = [];
				userinfo().then((res) => {
					if (res.status.errorCode == 0) {
						this.info = res.data;
					} else if (res.status.errorCode == 401) {
						this.$emit('getTokenNum', false)
						console.log(res)
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			addbank() {
				this.bindbank = true;
				this.getbanklist()
			},
			getmywallet() {
				let walletlistTow = []
				mywallets().then((res) => {
					if (res.status.errorCode == 0) {
						walletlistTow = res.data;
						// this.walletlist = res.data
						walletlistTow.forEach((item, index) => {
							if (item.money != '未开通') {
								item.moneyTow = null;
								let data = {
									"api_id": item.id
								}
								check(data).then((res) => {
									if (res.status.errorCode == 0) {
										item.moneyTow = res.data.balance
										this.allMoney = (Number(this.allMoney) + Number(item
											.moneyTow)).toFixed(2);
										console.log(item.moneyTow, this.allMoney)
									} else {
										// this.$message.error(res.status.msg);
										this.$message({
											showClose: true,
											message: res.status.msg,
											type: 'error'
										});
									}
								}).catch((err) => {
									console.log(err, 'err')
								});
							}
						})
						this.walletlist = walletlistTow;
						console.log(this.walletlist)
						// this.isShowLoading = false;
					} else if (res.status.errorCode == 401) {
						this.$emit('getTokenNum', false)
						console.log('401')
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			getbanklist() {
				banklist().then((res) => {
					if (res.status.errorCode == 0) {
						this.bank = res.data
						this.selectbank = res.data[1]
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = false;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			getMsg(num) {
				if (num == 0) {
					this.isShowOne = !this.isShowOne;
				}
				if (num == 1) {
					this.isShowTow = !this.isShowTow;
				}
				if (num == 2) {
					this.isShowThree = !this.isShowThree;
				}
			},
			blurinput(num) {
				if (num == 0) {
					if (this.name == '') {
						this.isShowOness = true;
						this.messageTextOne = this.$t('indexTitle.title58');
						this.isShowOne = !this.isShowOne;
					} else {
						this.isShowOness = false;
					}
				}
				if (num == 1) {
					if (this.bankcard == '') {
						this.isShowTowss = true;
						this.messageTextThree = this.$t('indexTitle.title58');
						this.isShowTow = !this.isShowTow;
					} else {
						this.isShowTowss = false
					}
				}
				if (num == 2) {
					if (this.wangdian == '') {
						this.isShowThreess = true;
						this.messageTextFour = this.$t('indexTitle.title58');
						this.isShowThree = !this.isShowThree;
					} else {
						this.isShowThreess = false
					}
				}
			},
			inputjianting(num) {
				if (num == 0) {
					if (!this.name) {
						this.isShowOness = true;
						this.messageTextThree = this.$t('indexTitle.title58');
						this.isShowOne = !this.isShowOne;
					} else {
						this.isShowOness = false;
						this.isShowThreessTow = false;
						this.messageText = '';
					}
				}
				if (num == 1) {
					if (!this.bankcard) {
						this.isShowTowss = true;
						this.messageTextThree = this.$t('indexTitle.title58');
						this.isShowTow = !this.isShowTow;
					} else {
						this.isShowTowss = false;
						this.isShowThreessTow = false;
						this.messageText = '';
					}
				}
				if (num == 2) {
					if (!this.wangdian) {
						this.isShowThreess = true;
						this.messageTextFour = this.$t('indexTitle.title58');
						this.isShowThree = !this.isShowThree;
					} else {
						this.isShowThreess = false;
						this.isShowThreessTow = false;
						this.messageText = '';
					}
				}
			},
			submit() {
				let that = this;
				this.isShowOness = false;
				this.isShowThreessThree = false;
				this.isShowTowss = false;
				this.isShowThreess = false;
				this.isShowThreessTow = false;
				this.messageTextOne = '';
				this.messageTextTow = '';
				this.messageTextThree = '';
				this.messageTextFour = '';
				this.messageText = '';
				if (this.name == '') {
					this.isShowOness = true;
					this.messageTextOne = this.$t('indexTitle.title143');
					// this.$message.error(this.$t('indexTitle.title143'));
					return false
				}
				if (this.psd == '') {
					this.isShowThreessThree = true;
					this.messageTextTow = this.$t('indexTitle.title144');
					// this.$message.error(this.$t('indexTitle.title144'));
					return false
				}
				if (this.bankcard == '') {
					this.isShowTowss = true;
					this.messageTextThree = this.$t('indexTitle.title145');
					// this.$message.error(this.$t('indexTitle.title145'));
					return false
				}
				if (this.wangdian == '') {
					this.isShowThreess = true;
					this.messageTextFour = this.$t('indexTitle.title146');
					// this.$message.error(this.$t('indexTitle.title146'));
					return false
				}
				let data = {
					bank_username: this.name,
					bank_name: this.selectbank,
					bank_card: this.bankcard,
					bank_branch_name: this.wangdian
				}
				newbindbank(data).then((res) => {
					if (res.status.errorCode == 0) {
						this.info = [];
						this.getuserinfo()
						// this.$message.success(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						this.isShowCloseBot = true;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'success'
						// });
						this.bindbank = false;
					} else {
						this.isShowThreessTow = true;
						this.messageText = res.status.msg;
						// this.$message.error(res.status.msg);
					}
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			loginOut() {
				localStorage.removeItem('token');
				localStorage.removeItem('siteTitle');
				localStorage.removeItem('siteIco');
				if (localStorage.getItem('languageTow')) {
					localStorage.removeItem('languageTow');
				}
				if (localStorage.getItem('language')) {
					localStorage.removeItem('language');
				}
				if (localStorage.getItem('userInfo')) {
					localStorage.removeItem('userInfo');
				}
				// window.location.reload()
				this.$router.push('/login')
			},
			goNextPage(page) {
				this.$router.push(page)
			}
		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
	}

	.member-center-main {
		color: #545658;
		display: flex;
		justify-content: center;
		margin: 0 auto;
		max-width: 1280px;
		padding: 20px 0;
		width: 100%;
	}

	.member-center-menu {
		overflow: hidden;
		width: 220px;
	}

	.nrc-loading.active {
		display: block;
		margin: 0 auto;
	}

	.nrc-loading {
		animation: loading-spinner 1s linear infinite;
		border-color: #666 transparent transparent #666;
		border-radius: 10px;
		border-style: solid;
		border-width: 2px;
		height: 14px;
		right: 15px;
		top: 15px;
		width: 14px !important;
		z-index: 2000;
	}

	@keyframes loading-spinner {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(1turn);
		}
	}

	.info-block {
		align-items: center;
		border-bottom: 1px solid #e9e9e9;
		display: flex;
		padding: 30px 15px 15px;
	}

	.playerid {
		font-size: 22px;
		font-weight: 600;
		word-break: break-all;
	}

	.balance-info {
		align-items: flex-end;
		border-bottom: 1px solid #e9e9e9;
		display: flex;
		justify-content: space-between;
		padding: 15px;
	}

	.currency {
		padding-right: 8px;
	}

	.balance {
		font-size: 18px;
		font-weight: 500;
	}

	.nav-block {
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.item {
		align-items: center;
		box-sizing: border-box;
		color: #939698;
		cursor: pointer;
		display: flex;
		height: 60px;
		line-height: 1.4;
		padding: 0 15px;
		position: relative;
		transition: .3s ease;
		width: 100%;
	}

	.item.active {
		color: #5235ff;
	}

	.item:hover {
		color: #5235ff;
	}

	.item img {
		width: 35px;
		height: 35px;
		margin-right: 12px;
	}

	.item .label {
		font-size: 16px;
		font-weight: 500;
		line-height: 1.2;
	}

	.member-center-content {
		background: #f9f9f9;
		border-radius: 10px;
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .15);
		display: flex;
		justify-content: space-between;
		min-height: 700px;
		overflow: hidden;
		position: relative;
		width: calc(100% - 220px);
	}

	.member-center-profile {
		padding: 24px;
		width: 50%;
		position: relative;
	}

	.title {
		color: #545658;
		margin-bottom: 25px;
		font-size: 19px;
		font-weight: 600;
		line-height: 24px;
	}

	.nrc-tabs-nav {
		border: 0;
		align-items: center;
		display: flex;
		justify-content: flex-start;
	}

	.nrc-tabs-tab {
		flex: 1;
		font-weight: 500;
		height: 40px;
		padding: 0 !important;
		margin-right: 8px;
		align-items: center;
		border: 1px solid #e9e9e9;
		border-radius: 50px;
		display: flex;
		font-size: 14px;
		justify-content: center;
		line-height: 20px;
		color: #666;
		cursor: pointer;
		position: relative;
	}

	.nrc-tabs-tab:last-child {
		margin-right: 0;
	}

	.nrc-tabs-tab.active {
		color: #5235ff;
	}

	.setting-btn {
		align-items: center;
		background: #5235ff;
		border-radius: 5px;
		color: #fff;
		cursor: pointer;
		display: flex;
		font-size: 16px;
		font-weight: 500;
		justify-content: center;
		margin: 24px 0;
		padding: 12px 0;
		width: 100%;
	}

	table {
		color: #545658;
		font-size: 15px;
		width: 100%;
	}

	td {
		border-bottom: 1px solid #ececec;
		padding: 15px;
	}

	table .label {
		color: #939698;
	}

	.value-wrap {
		align-items: center;
		display: flex;
	}

	.promo-ads-title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.el-button {
		border-radius: 5px;
		height: 29px;
		padding: 5px 20px;
		background-color: #5235ff;
		border: 0;
		color: #fff;
		cursor: pointer;
		font-size: 16px;
	}

	.nodata {
		height: 700px;
		overflow: auto;
	}

	.no-data {
		align-items: center;
		color: #545658;
		display: flex;
		flex-direction: column;
		margin-top: 150px;
	}

	.no-data img {
		width: 50%;
	}

	.top-info {
		align-items: center;
		display: flex;
		flex-direction: column;
		margin: 24px;
	}

	.top-info .label {
		color: #939698;
		font-size: 16px;
		margin-bottom: 10px;
	}

	.main-wallet {
		align-items: center;
		color: #3b3d3e;
		display: flex;
	}

	.main-wallet .value {
		font-size: 24px;
		font-weight: 500;
	}

	.main-wallet img {
		width: 18px;
		height: 18px;
		margin-left: 3px;
		cursor: pointer;
	}

	.main-wallet img.loading {
		animation: turn 1.5s linear;
	}

	@keyframes turn {
		0% {
			transform: rotate(0deg);
		}

		33% {
			transform: rotate(180deg);
		}

		66% {
			transform: rotate(360deg);
		}

		100% {
			transform: rotate(540deg);
		}
	}

	.sub-wallets {
		display: flex;
		flex-wrap: wrap;
		max-height: 600px;
		overflow-y: auto;
	}

	.data-box {
		align-items: center;
		border: 1px solid #ececec;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		height: 63px;
		margin: 0 1% 10px;
		overflow: hidden;
		width: 31%;
	}

	.data-box div {
		align-items: center;
		box-sizing: border-box;
		color: #545658;
		display: flex;
		font-size: 14px;
		justify-content: center;
		width: 100%;
	}

	.data-box .name {
		background-color: #fafafc;
		border-bottom: 1px solid #ececec;
		height: 27px;
	}

	.data-box .balance {
		font-weight: 500;
		height: 35px;
	}

	.data-box .balance.is-um {
		color: #ffa600;
	}

	.proList {
		width: 100%;
		padding: 0px 20px 0;
		margin-top: 50px;
		box-sizing: border-box;
	}

	.proListIt {
		width: 100%;
		padding: 15px 0;
		box-sizing: border-box;
		border-bottom: 1px solid #e9e9e9;
	}

	.proListItTop {
		color: #545658;
		font-size: 10px;
		margin-bottom: 5px;
		opacity: .6;
	}

	.proListItBot {
		font-size: 14px;
		line-height: 1.29;
		min-height: 18px;
		color: #545658;
		font-weight: 300;
	}

	.proListItBottOW {
		width: 100%;
	}

	.BriBox {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.BriBoxright img {
		width: 20px;
		height: 23px;
	}

	.addBankBox {
		width: 100%;
		margin: 20px auto 0;
		align-items: center;
		background: #fafafc;
		border: 1px solid #ececec;
		border-radius: 5px;
		display: flex;
		justify-content: center;
		min-height: 100px;
		padding: 22px 0;
	}

	.addBankBoxIt {
		background-color: #7240ff;
		border: none;
		color: #fff;
		cursor: pointer;
		font-size: 15px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 44px;
		line-height: 44px;
		border-radius: 5px;
		padding: 0 20px;
		width: auto;
	}


	.magBox {
		border-radius: 5px;
		box-sizing: border-box;
		display: flex;
		height: 54px;
		justify-content: space-around;
		padding: 0 15px;
		background-color: #fbfbfb;
		border: 1px solid #e9e9e9;
		color: #777;
		margin-top: 10px;
		font-weight: 300;
	}

	.input-block {
		box-sizing: border-box;
		position: relative;
		width: 100%;
	}

	.input-block label {
		color: #a0a3a5;
		font-size: 14px;
		line-height: 1.29;
		pointer-events: none;
		position: absolute;
		top: 18px;
		transition: .2s;
		font-weight: 300;
		padding-left: 12px;
	}

	.input-block label:before {
		bottom: 0;
		color: #e94951;
		content: "*";
		font-size: 10px;
		left: 0;
		margin: auto;
		position: absolute;
		top: 4px;
	}

	.inputblocklabel {
		font-size: 10px !important;
		top: 8px !important;
	}

	.input-block input {
		background-color: transparent;
		color: #545658;
		border: none !important;
		box-sizing: border-box;
		height: 100%;
		position: absolute;
		top: 0;
		transition: .2s;
		width: 100%;
		outline: medium;
		padding: 0;
		font-family: sans-serif;
		font-size: 14px;
		line-height: 1.15;
		margin: 0;
	}

	.input-block input:focus {
		height: 28px;
		box-shadow: none;
		top: 24px;
	}

	.inputblockinput {
		height: 28px !important;
		box-shadow: none !important;
		top: 24px !important;
	}

	.focusBox {
		border: 1px solid #5235ff;
		background-color: #fff;
		border-color: rgba(114, 64, 255, .5);
		box-shadow: 0 0 0 2px rgba(114, 64, 255, .1);
	}

	.zhuyiBox img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.zhuyiBox {
		display: flex;
		font-size: 12px;
		margin: 5px 0 10px;
		color: #86898c;
		font-weight: 300;
	}

	.zhuyiBoxTow {}

	.zhuyiBoxTow img {
		width: 15px;
		height: 15px;
		margin-right: 5px;
	}

	.zhuyiBoxTow {
		display: flex;
		font-size: 12px;
		margin: 5px 0 10px;
		color: #e94951;
		font-weight: 300;
	}

	.btnssss {
		margin-top: 20px;
		background-color: #7240ff;
		border: none;
		border-radius: 3px;
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		font-stretch: normal;
		font-style: normal;
		font-weight: 300;
		height: 44px;
		width: 100%;
		text-align: center;
		line-height: 44px;
	}

	.error {
		border: 1px solid #e94951;
		color: #e94951;
	}

	.mc-form-item {
		margin-top: 10px;
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 5px;
		display: block;
		min-height: 54px;
		position: relative;
		transition: .8s;
		margin-bottom: 10px;
	}

	.mc-form-item img {
		position: absolute;
		right: 16px;
		top: 35%;
		width: 18px;
		height: 18px;
	}

	.mc-input-field-label {
		font-size: 10px;
		top: 8px;
		color: #939698;
		padding-left: 15px;
		position: absolute;
		transition: .2s;
	}

	.mc-input-base1 {
		box-shadow: none;
		font-size: 14px;
		height: 28px;
		top: 24px;
		position: absolute;
		width: 100%;
		background-color: transparent;
		color: #545658;
		display: flex;
	}

	/deep/ .mc-input-base1 input {
		border: 0;
		height: 28px;
	}

	/deep/ .mc-input-base1 .el-input__suffix {
		top: -17px;
		height: 14px;
	}

	/deep/ .mc-input-base1 .el-input .el-select__caret {
		color: #5235ff;
		font-size: 16px;
	}

	/deep/ .mc-input-base2 .el-input__icon {
		height: fit-content;
	}
</style>